Skip to main content

Chips input field

The Chips Input Field component is a dynamic and interactive tool designed to allow users to input and manage multiple pieces of text data efficiently. This component is particularly useful for applications that require users to enter tags, keywords, or any list of items that can be represented as discrete units, or "chips." By using the Chips Input Field, businesses can enhance the user experience by providing a streamlined and intuitive interface for adding, editing, and removing items. This component is ideal for scenarios where users need to manage lists of items quickly, such as in search filters, contact lists, or task management applications. Its touch-friendly design makes it especially suitable for mobile and touchscreen interfaces.

Properties​

To effectively utilize the Chips Input Field component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Chips Input Field component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
  • Display and Interaction Attributes:
    • Label: The text displayed as the title of the chip component, providing context and clarity to the user about the purpose of the input field.
    • Mandatory Field: A setting (default is OFF) that specifies whether the field is required to be completed as part of a form. This ensures that users provide necessary input before proceeding.
    • Help: An optional feature (default is OFF) that displays help text beside the label, offering additional guidance or information to the user.
    • Enabled: A setting (default is ON) that determines whether the input field is active and can be interacted with by the user. If disabled, the field is visually indicated as inactive, preventing user interaction.

By structuring the Chips Input Field component with these attributes, businesses can create a flexible and user-friendly interface that effectively manages multiple text inputs. The ability to add, edit, and remove chips dynamically ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure that each chip is clearly labeled to indicate its purpose. Use descriptive labels that help users understand the options available.
  • Accessibility: Make sure chips are accessible by providing proper labels and ensuring they can be navigated using keyboard shortcuts and screen readers.
  • Consistent Styling: Maintain consistent styling for chips across your application to create a cohesive user experience.

Highest Value Features​

  • Interactive Feedback: Provide visual feedback when a chip is selected or deselected, such as changing the background color or adding a border.
  • Clear Deletion Options: Include a clear method for users to remove chips, such as an "X" icon, to enhance usability.
  • Grouping Related Chips: Group chips logically to help users understand the relationship between options.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the chips to define their outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the chips to create space between the text and the border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the chips using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Font​

  • LABEL FONT: Customize the font of the label for each chip using the following settings:
    • FONT OPTIONS:
      • Design System: By default this follows the "Label medium" on the active design system.
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherits from the parent element).

Answer Font​

  • ANSWER FONT: Customize the font of the text displayed on the chips using the following settings:
    • FONT OPTIONS: (same as above).
      • Design System: By default this follows the "Label small" on the active design system.

Input Field Border​

  • INPUTFIELD BORDER: Customize the border of the input field containing the chips using the following settings:
    • BORDER OPTIONS: (same as above).
      • Design System: By default with on focus this follows the "Accent one" on the active design system.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Chips Input Field component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

  • This action is executed whenever the chips input field value is changed by the user, such as when a chip is added or removed.
  • It triggers actions or processes based on the updated set of chips, allowing for dynamic updates within the application.

Compatible functions​

  • No compatible functions (yet)